<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改用户')" />
    <th:block th:include="include :: select2-css" />
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-role-add">
        <input name="id" th:value="${id}"  hidden id = "id">
        <input name="serverStatus" hidden id = "serverStatus">

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">服务器名称：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="serverName" id="serverName" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">服务器Ip：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="serverIp" id="serverIp" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">SSH登录用户：</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" name="loginUser" id="loginUser" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">SSH登录密码：</label>
            <div class="col-sm-8">
                <input class="form-control" type="password" name="loginPwd" id="loginPwd" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">SSH端口：</label>
            <div class="col-sm-8">
                <input class="form-control" type="number" value="22" name="loginPort" id="loginPort" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input id="remark" name="remark" class="form-control" type="text">
            </div>
        </div>


    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
<script type="text/javascript">
    var prefix = ctx + "system/user";

    $(document).ready(function() {
        $.ajax({
            cache : true,
            type : "GET",
            url : ctx + "server/getById?id="+$('#id').val(),
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                $.each(data.data, function(key, value) {
                    var inputElement = $('[name="' + key + '"]'); // 选择与对象属性名称相同的表单字段
                    if (inputElement.length > 0) {
                        inputElement.val(value); // 设置表单字段的值
                    }
                });
            }
        });
    });


    $("#form-role-add").validate({
        rules:{
            serverIp:{
                required:true
            },
            loginUser:{
                required:true
            },
            loginPwd:{
                required:true
            },
        },
        messages: {
            "serverIp": {
                required: "服务器Ip不能为空"
            },
            "loginUser": {
                remote: "登录名不能为空"
            },
            "loginPwd": {
                remote: "登录密码不能为空"
            }
        },
        focusCleanup: true
    });


    function submitHandler() {
        if ($.validate.form()) {
            $.modal.loading("正在测试服务器连接，请勿关闭页面")
            setTimeout(function() {
                // 延迟执行的代码
                save();
            }, 100);
        }
    }

    function save() {
        if (!$.validate.form()) {
            return
        }
        // 获取表单数据并转换为 JSON
        var formData = $("#form-role-add").serializeArray(); // 获取表单字段的数组
        var jsonData = {};
        // 遍历表单数据数组，构建 JSON 对象
        $.each(formData, function() {
            jsonData[this.name] = this.value;
        });
        $.operate.postJSON(ctx+"server/checkConnect",JSON.stringify(jsonData),function (res) {
            jsonData["serverStatus"] = res.data.status;
            if(res.data.code == '200'){
                $.modal.msgSuccess("测试连接服务器完成，正在保存");
                $.operate.postJSON(ctx + "server/save",JSON.stringify(jsonData),function (data) {
                    $.operate.successCallback(data);
                })
                $.modal.closeLoading();
            }else {

                var res = $.modal.confirm("连接失败："+res.msg+" 是否继续保存?",function () {
                    $.operate.postJSON(ctx + "server/save",JSON.stringify(jsonData),function (data) {
                        $.operate.successCallback(data);
                    })
                })
                $.modal.closeLoading();
            }
        })
    }




</script>
</body>
</html>